<template>
  <div class="main-container">
    <el-container>
      <el-header>
        <span>云办公</span>
        <div>
          <el-button type="text" icon="el-icon-bell" size="normal" style="color: #fff; margin-right: 10px; vertical-align: middle" @click="goChat"></el-button>
          <el-dropdown class="userInfo" @command="commandHandler">
            <span class="el-dropdown-link"> {{ user.name }}<el-avatar :src="user.userFace"></el-avatar> </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="userinfo">个人中心</el-dropdown-item>
              <el-dropdown-item command="updatePassword">修改密码</el-dropdown-item>
              <el-dropdown-item command="setting">设置</el-dropdown-item>
              <el-dropdown-item command="logout">注销登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px" router>
          <el-menu background-color="#252b32" text-color="#fff" active-text-color="#409EFF" router>
            <el-submenu v-for="(item, index) in routes" :index="index + ''" :key="index" @click="alert(item)">
              <template slot="title"><i :class="item.iconCls"></i>{{ item.name }}</template>
              <el-menu-item v-for="(children, indexj) in item.children" :key="indexj" :index="children.path">{{ children.name }} </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <el-breadcrumb separator-class="el-icon-arrow-right" v-if="$router.currentRoute.path != '/home'">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <!-- <el-breadcrumb-item>{{ $router.currentRoute.name }}</el-breadcrumb-item> -->
            <el-breadcrumb-item>{{ $router.currentRoute.name }}</el-breadcrumb-item>
          </el-breadcrumb>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

    <!-- 修改个人信息对话框 -->
    <el-dialog title="个人中心" :visible.sync="dialogVisible" width="30%">
      <div style="display: flex; justify-content: center">
        <img title="点击修改用户头像" :src="admin.userFace" alt="" style="height: 100px; width: 100px; border-radius: 50px" />
      </div>
      <el-form ref="form" :model="admin" label-width="80px">
        <el-form-item label="用户昵称:"> <el-input v-model="admin.name"></el-input> </el-form-item>
        <el-form-item label="电话号码:"> <el-input v-model="admin.telephone"></el-input> </el-form-item>
        <el-form-item label="手机号码:"><el-input v-model="admin.phone"></el-input> </el-form-item>
        <el-form-item label="居住地址:"><el-input v-model="admin.address"></el-input> </el-form-item>
        <el-form-item label="用户标签:">
          <el-tag v-for="(r, index) in admin.roles" :key="index" type="success">{{ r.nameZh }}</el-tag>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="UpdateUserInfo">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改密码对话框 -->
    <el-dialog title="修改密码" :visible.sync="updatePassDlogVisible" width="30%">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="updatePassFormRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="请输入旧密码" prop="oldPass">
          <el-input type="password" v-model="ruleForm.oldPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="请输入新密码" prop="pass">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updatePassword()">提交</el-button>
        <el-button @click="resetForm()">重置</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getRequest, postRequest } from '@/utils/request.js'
import { mapState } from 'vuex'
export default {
  name: 'Home',
  async created() {
    this.initAdmin()
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.updatePassFormRef.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      updatePassDlogVisible: false,
      user: '',
      dialogVisible: false,
      admin: {
        name: '',
        telephone: '',
        phone: '',
        address: '',
      },
      ruleForm: {
        pass: '',
        checkPass: '',
        oldPass: '',
      },
      rules: {
        pass: [{ validator: validatePass, trigger: 'blur' }],
        checkPass: [{ validator: validatePass2, trigger: 'blur' }],
        oldPass: [{ validator: validatePass, trigger: 'blur' }],
      },
    }
  },
  methods: {
    commandHandler(command) {
      if (command == 'logout') {
        this.$confirm('是否确认退出?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            //注销登陆
            this.postRequest('/logout')
            sessionStorage.removeItem('token')
            sessionStorage.removeItem('user')
            //清空菜单
            this.$router.replace('/login')
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            })
          })
      } else if (command == 'userinfo') {
        // this.$router.push('/userinfo')

        this.dialogVisible = true
      } else if (command == 'updatePassword') {
        this.updatePassDlogVisible = true
      }
    },
    goChat() {
      this.$router.push('/chat')
    },
    //初始化个人信息
    async initAdmin() {
      const data = await this.getRequest('/admin/info')
      if (data) {
        // this.admin = data
        this.user = data
        Object.assign(this.admin, data)
        sessionStorage.setItem('user', JSON.stringify(data))
      }
    },
    //修改个人信息
    async UpdateUserInfo() {
      console.log('updateUserInfo', this.admin)
      const data = await this.putRequest('/admin/info', this.admin)
      if (data) {
        this.dialogVisible = false
        this.initAdmin()
      }
    },
    //取消
    cancel() {
      // if (!this.admin.name || !this.admin.telephone || !this.admin.phone || !this.admin.address) {
      //   this.initAdmin()
      // }
      this.initAdmin()

      this.dialogVisible = false
    },
    updatePassword() {
      this.$refs['updatePassFormRef'].validate((valid) => {
        if (valid) {
          this.ruleForm.adminId = this.admin.id
          this.putRequest('/admin/pass', this.ruleForm).then((resp) => {
            if (resp) {
              // 更新密码成功之后退出登录
              this.postRequest('/logout')
              window.sessionStorage.removeItem('user')
              window.sessionStorage.removeItem('token')
              this.$store.commit('initRoutes', [])
              this.$router.replace('/')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs['updatePassFormRef'].resetFields()
    },
  },
  computed: {
    ...mapState(['routes']),
  },
}
</script>

<style lang="less" scoped>
// .el-main {
//   // background-color: #ccc;
// }
.el-container {
  height: 100%;
}
.el-header {
  display: flex;
  justify-content: space-between;
  font-size: 26px;
  line-height: 60px;
  color: #fff;
  background-color: #303030;
}

/deep/ .el-dropdown {
  float: right;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
  .el-avatar {
    margin-left: 10px;
    vertical-align: middle;
  }
}

/deep/ .el-submenu .el-menu-item {
  min-width: 0;
}

.el-breadcrumb {
  padding: 10px 0 10px 5px;
  margin-bottom: 10px;
  font-size: 18px;
  // background-color: #67c23a;
}

.el-form {
  margin-top: 10px;
}
</style>
